<template>
	<view>
		<view class="swiper">
			<swiper 
			  :autoplay="true" 
			  :interval="3000" 
			  :duration="1000" 
			  :indicator-dots="true" 
			  :circular="true" 
			  indicator-active-color="#55ff7f"
			  indicator-color="rgba(255, 255, 255, 0.3)">
				<swiper-item v-for="(i,index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="i" alt="" class="img"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps({
		bannerList: {
			type: [String,Array],
			default: []
		}
	})
</script>

<style lang="scss" scoped>
	.swiper{
		width: 100%;
		height: mp-sizing(140);
		border-radius: mp-sizing(10);
		overflow: hidden;
		margin-bottom: mp-sizing(10);
		.swiper-item{
			width: 100%;
			height: mp-sizing(140);
			.img{
				width: 100%;
				height: mp-sizing(140);
			}
		}
	}
</style>